// theme.less文件
// 实现换肤的样式函数
/*
    1.主色调，整体项目的主要颜色。
    2.首页的背景颜色。
    3.字体颜色。主要是和主色调来配合使用。
    4.表格滑过的颜色。
    5.快捷入口背景色。
    6/7.首页每一项渐变的颜色，待定。
*/
//将项目中所有需要更改样式的css全部提取出来写在这个函数中，将其他地方写的样式都删掉，不然可能会权重不够 样式覆盖不掉。 所以删掉最好。
//函数的参数可以给默认值，就是项目初始化时的默认样式。这里只复制了一部分样式，要改的地方挺多的。
.theme(@background:  #265FAA, @homebg: rgba(37, 37, 37, 1.00),@stepColor:#265FAA, @fontcolor: #fff, @hoverbg: #3189EA , @shortcut: rgba(0, 149, 136, 0.65), @homeli1: rgba(47, 42, 65, 0.5), @homeli2: #2e3d50,@backgroundTitle:#fff,@elColor:#48A6FF) {
    // 头部的样式
    .el-header {
        background: @background!important;
    }
    .userBox {
        background: @background!important;
    }
    // .menuList .item:hover{
    //     background-color: @hoverbg!important;
    // }
    .menuList .item:active{
        background-color: #2B74C9!important;
    }
    .itemIcon:hover{
        background-color:#225598 !important;
    }
    .headerTitle:hover{
        background-color:#225598 !important;
    }
    .searchBtn{
        background-color: @hoverbg!important;
        border-color: @hoverbg!important;
    }
    a.btnColor{  
        color: @elColor!important;
    }
    .el-divider__text{
        color: @elColor!important;
    }
    .el-link.el-link--default:after, .el-link.el-link--primary.is-underline:hover:after, .el-link.el-link--primary:after{
        color: @elColor!important;
    }
    .el-link.is-underline:hover:after{
        border-bottom: 1px solid @elColor!important;
    }
    // 头部头像旁边的竖线
    .el-header .downApp:before{
        background: @hoverbg!important;
    }
    //切换非建，建筑选中样式
    .activeItem {
        background: @hoverbg!important;
    }
    // .container .el-tabs__header .el-tabs__nav .el-tabs__item.is-active {
    //     color: @background!important;
    // }
    .todoBox,.proStatusDisBox,.realNameStatisticsBox,.payrollStatisticsBox,.secondLeftBox {
        .el-tabs__item.is-active {
            color: @background!important;
        }
    }
    //侧边栏样式
    .el-aside .is-opened .el-submenu__title:before,
    .logoBox .logoTile,.el-tabs__active-bar{
        background: @background!important;
    }

    // tab栏样式
    .elTabPane .el-tabs__item:hover,.elTabPane .el-tabs__item.is-active {
        color: @background !important;
    }

    // .el-menu--inline .el-menu-item:hover:before, 
    // .el-menu--inline .is-active:before{
        // border:1px solid @background!important;
        // background:@background!important;
    // }
    //按钮样式
    .saveBtn,.commonBtn,.save,.el-message-box__btns button:nth-child(2),.submitBtnBox,.createSalaryBut,
    .el-button.el-button--default.el-button--small.el-button--primary,//温馨提示按钮
    .miniButColor,//修改手机号及修改密码页面按钮
    .listAddBtn{
        background-color: @hoverbg!important;
        border-color: @hoverbg!important;
        &:hover {
            opacity: 0.8;
        }
    }
    .topTitle .btn,.topContent .salaryAccountBut,.btnStyle {
        border: 1px solid @hoverbg!important;
        color: @fontcolor!important;
        background-color: @hoverbg!important;
        &:hover{
            opacity: 0.8;
        }
    }
    //上传和注册及修复路径按钮
    .uploadImg, .toRegister:hover,.funBut {
        border-color: @hoverbg!important;
        color: @hoverbg!important;
    }
    // 穿梭框按钮
    .el-button.el-button--primary.el-transfer__button{
        border-color: @hoverbg!important;
        background-color: @hoverbg!important;
        &:hover{
            border-color: #66b1ff!important;
            background-color: #66b1ff!important;
        }
    }
    .el-button.el-button--primary.is-disabled.el-transfer__button{
        border-color: #a0cfff!important;
        background-color: #a0cfff!important;
    }
    .uploadImg{
        &:hover {
            background-color: #EAF3FC !important;
        }
        // &:focus {
        //     background-color: #fff !important;
        // }
    }
    //生成工资表步骤条
    .topTitle {
        .el-step__head.is-process {
            color: #fff;
            .el-step__icon.is-text {
                border-color: @hoverbg!important;
                background: @hoverbg!important;
            }
        }
        .el-step__head.is-success,
        .el-step__title.is-success,
        .el-step__title.is-process {
            color: @hoverbg!important;
        }
        .el-step__head.is-success .el-step__line {
            background-color: @hoverbg!important;
            border-color: @hoverbg!important;
        }
        .el-step__head.is-success .el-step__icon.is-text {
            border-color: @hoverbg !important;
        }
    }
    //制作工资表悬浮效果
    .createWay ul li {
        background: linear-gradient(0, @hoverbg 1px, @hoverbg 1px) no-repeat,
        linear-gradient(-90deg, @hoverbg 1px, @hoverbg 1px) no-repeat,
        linear-gradient(-180deg, @hoverbg 1px, @hoverbg 1px) no-repeat,
        linear-gradient(-270deg, @hoverbg 1px, @hoverbg 1px) no-repeat !important;
        background-size: 0 1px, 1px 0, 0 1px, 1px 0 !important;
        background-position: left top, right top, right bottom, left bottom !important;
        &:hover{
            border: 1px solid @hoverbg \0!important;
            background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100% !important;
            -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,.1) !important;
            -o-box-shadow: 0 10px 30px 0 rgba(0,0,0,.1) !important;
            box-shadow: 0 10px 30px 0 rgba(0,0,0,.1) !important;
            .way{
                color: @hoverbg!important;
            }
        }
    } 
    // 引导图按钮样式
    div#driver-popover-item .driver-popover-footer button{ 
        color: @hoverbg!important;
        border: 1px solid @hoverbg!important;
    }
    // .dateShow,.is-active,.el-tabs__item:hover,.fontColor,.quantity{
    //     color: @background!important;
    // }
    .dateShow{
        color: @hoverbg!important;
    }
    .el-button.el-button--default.el-button--small.el-button--primary {
        background-color: @hoverbg!important;
        border-color: @hoverbg!important;
    }
    //获取验证码样式
    .getCode{
        color: @fontcolor!important;
        background-color: @hoverbg!important;
        border-color: @hoverbg!important;
        &:hover{
            opacity: 0.8;
        }
    }
    // tab切换
    .tabsContainer .el-radio-button__orig-radio:checked+.el-radio-button__inner{
        background-color: #fff;
        border-color: @hoverbg;
        color:@hoverbg;
        -webkit-box-shadow: -1px 0 0 0 @hoverbg !important;
        box-shadow: -1px 0 0 0 @hoverbg !important;
    }

    .tabsContainer .el-radio-button:first-child .el-radio-button__inner{
        box-shadow:none!important;
    }
    //链接默认及悬浮样式
    .projectZb {
        ul li:hover {
            color: @hoverbg!important;
        }
        .selected {
            color: @hoverbg!important;
        }
    }
    //树形结构样式
    .el-tree-node.is-current .el-tree-node__content {
        .custom-tree-node,.el-tree-node__label {
            color: @hoverbg!important;
        }
    }
    .el-tree-node__content:hover .el-tree-node__label {
        color: @hoverbg!important;
    }
    .el-tree-node__content:hover .custom-tree-node{
        color: @hoverbg!important;
    }
    //登录入口图标
    .loginIconBg {
        background: @background!important;
    }
    //快捷入口功能背景
    .functionItemChange {
        background: @hoverbg!important;
    }
    // 二级小标题前面竖线
    .secondaryTitleTheme::before{
        background: @hoverbg!important;
    }
    // 字体色
    .fontColorTheme {
        color: @hoverbg!important;
    }
    // 步骤字体色
    .versionUpdateDetail{
        .stepFontColorTheme {
            color: @stepColor!important;
            .iconshujutongbu{
                color: @stepColor!important;
            }
        }
        .stepFontColorTheme {
            &::before {
                background: @stepColor!important;
            }
        }
    }
    // 边框色
    .fontBorderTheme {
        border-color: @hoverbg!important;
    }
    // 背景色
    .bgcTheme {
        background-color: @hoverbg!important;
    }
    // svg填充色
    .svgFillTheme {
        fill: @hoverbg!important;
    }
    .dotTheme::before {
        background-color: #6476F6!important;
    }
    .dateTheme{
        .el-input__inner {
            color:@hoverbg!important;
        }
        .el-input__prefix {
            color:@hoverbg!important;
        }
    }
    .mainBox{
        .el-step__head.is-process {
            color: #fff;
            .el-step__icon.is-text {
                border-color: @hoverbg!important;
                background: @hoverbg!important;
            }
        }
        .el-step__head.is-success,
        .el-step__title.is-success,
        .el-step__title.is-process {
            color: @hoverbg!important;
        }
        .el-step__head.is-success .el-step__icon.is-text{
            border-color: @hoverbg!important;
        }
        .el-step__head.is-success .el-step__line {
            background-color: @hoverbg!important;
        }
    }
    .registerType li {
        background: linear-gradient(0, @hoverbg 1px, @hoverbg 1px) no-repeat,
                    linear-gradient(-90deg, @hoverbg 1px, @hoverbg 1px) no-repeat,
                    linear-gradient(-180deg, @hoverbg 1px, @hoverbg 1px) no-repeat,
                    linear-gradient(-270deg, @hoverbg 1px, @hoverbg 1px) no-repeat !important;
        background-size: 0 1px, 1px 0, 0 1px, 1px 0 !important;
        background-position: left top, right top, right bottom,left bottom !important;
        &:hover {
            border: 1px solid @hoverbg \0 !important;
            background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100% !important;
            -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1) !important;
            -o-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1) !important;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1) !important;
            .way {
                color: @hoverbg !important;
            }
        }
    }
    .topBorderLeft {
        background: -webkit-linear-gradient(right, #FFF, @hoverbg) !important; /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #FFF, @hoverbg) !important; /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right,#FFF, @hoverbg) !important; /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #FFF, @hoverbg) !important; /* 标准的语法（必须放在最后） */
    }
    .topBorderRight {
        background: -webkit-linear-gradient(left, #FFF, @hoverbg) !important; /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(left, #FFF, @hoverbg) !important; /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(left,#FFF, @hoverbg) !important; /* Firefox 3.6 - 15 */
        background: linear-gradient(to left, #FFF, @hoverbg) !important; /* 标准的语法（必须放在最后） */
    }
    // 验证码按钮颜色
    .vscodeBtn{
        border: 1px solid @elColor !important;
        color: @elColor !important;
    }

    // 用户注册协议页面样式
    .container .boxWrap .mainBox .topStyle .topTitle{
        background: @elColor !important;
    }

    .container .boxWrap .mainBox .topStyle .topCircle{
        border: 2px solid  @elColor !important;
    }

    .container .boxWrap .mainBox .topStyle .topBorderLeft{
        background: -webkit-linear-gradient(right, #FFF,@elColor) !important; /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #FFF,@elColor) !important; /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right,#FFF,@elColor) !important; /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #FFF,@elColor) !important;
    }

    .container .boxWrap .mainBox .topStyle .topBorderRight{
        background: -webkit-linear-gradient(left, #FFF,@elColor) !important; /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(left, #FFF,@elColor) !important; /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(left,#FFF,@elColor) !important; /* Firefox 3.6 - 15 */
        background: linear-gradient(to left, #FFF,@elColor) !important;
    }

    .el-switch.is-checked .el-switch__core{
        border-color: @hoverbg;
        background-color: @hoverbg;
    }
    .logo-img {
        filter: drop-shadow(@hoverbg 80px 0) !important;
    }

    // 欠薪投诉编辑标题样式
    .caseCompTitle{
        color: @elColor !important;
    }

    .proFunc{
        background: @elColor !important;
    }

    .actionBoxAdd {
        border-color:@hoverbg !important;
        color:@hoverbg !important;
        &:hover {
            background:#EAF3FC;
            // color:@fontcolor !important;
        }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: @hoverbg;
        border-color: @hoverbg;
    }
    .setTabs {//信用评价指标设置主题色
        .active {
            background: rgba(49,137,234,0.1);
            color: @hoverbg!important;
        }
        .hasUsed {
            color: @hoverbg!important;
        }
        .el-checkbox__inner:hover {
            border-color: @hoverbg!important;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: @hoverbg!important;
            border-color: @hoverbg!important;
        }
    }
    .standardSetContent {//信用评价指标设置主题色
        .el-radio__inner:hover {
            border-color: @hoverbg!important;
        }
        .el-radio__input.is-checked .el-radio__inner {
            border-color: @hoverbg!important;
        }
        .el-radio__input.is-checked .el-radio__inner::after {
            background: @hoverbg!important;
        }
        .el-radio__input.is-checked + .el-radio__label {
            color: @hoverbg!important;
        }
    }
    .addLevel:hover {//信用评价指标设置主题色
        color: @hoverbg!important;
        border-color: @hoverbg!important;
    }
    .el-step.is-vertical .el-step__head{
        margin-top: 2px!important;
    }
}

//滁州换肤
.themeCz(@background: #37566C, @chooseBg: #7494A9,@hoverbg: #EDB90A,@choose: #8AFFEA,@btnbgc:#009588,@backgroundTitle:#fff) {
    // 头部的样式
    .el-header {
        background-color: #607E92 !important;
    } 
    .el-header .activeItem{
        background: #335A71!important;
        // opacity: 0.5;
        background-image: linear-gradient(180deg, rgba(0,215,205,0.00) 0%, #335A71 100%)!important;
        color: @choose!important;
    }
    // 头部头像旁边的竖线
    .el-header .downApp:before{
        background: #325976!important;
    }
    .el-aside,.el-aside .el-menu {
        background: @background!important;
    }
    .userBox {
        background-color: #607E92 !important;
    }
    .el-submenu__title{
        color: #fff !important;
    }
    .el-submenu__title i{
        color: #fff !important;
    }
    .menuList .item:hover{
        background-color:#335A71!important;
    }
    .el-aside .el-menu  .el-menu-item{
        color: #fff !important;
    }

    .el-aside .el-menu  .el-menu-item:hover,
    .el-aside .el-menu  .el-menu-item:focus{
        background: #7494A9 !important;
    }
    .el-aside .el-menu  .el-menu-item.is-active,
    .el-aside .el-menu .el-menu--inline .el-menu-item.is-active{
        color: @hoverbg !important;
        background:#7494A9 !important;
    }
    .el-aside .el-menu .el-menu--inline .el-menu-item.is-active span{
        color: @hoverbg !important;
    }
    .el-aside .el-menu-item.is-active span,
    .el-aside .el-menu-item.is-active i{
        color: #fff !important;
    }
    .el-aside .el-menu .el-menu--inline .el-menu-item {
        color: #fff !important;
        background: #45647B!important;
        &:hover {
            background-color: @chooseBg !important;
            color: @hoverbg!important;
            &:before {
                // border:1px solid @hoverbg!important;
                // background:@hoverbg!important;
            }
        }
    }
    .el-aside .el-menu--inline .is-active {
        background-color: @chooseBg !important;
        color: @hoverbg!important;
        &:before {
            // border:1px solid @hoverbg!important;
            // background:@hoverbg!important;
        }
    }
    .itemIcon:hover{
        background-color:#335A71 !important;
    }
    .headerTitle :hover{
        background-color:#335A71 !important;
    }
    .el-aside .is-opened .el-submenu__title:before{
        background: @hoverbg!important;
    }
    .el-aside .el-submenu__title{
        &:hover,&:focus {
            background: @chooseBg!important;
        }
    }
    .el-menu--inline{
        background: @chooseBg!important;
        .el-menu-item{
            padding-left: 55px !important;
            &:before {
              content: "";
              display: block;
              position: absolute;
              left: 0;
              width: 4px;
              height: 40px;
              background: @hoverbg !important;
              -webkit-transition: height 0.8s;
            }
          }
    }
    // 穿梭框按钮
    .el-button.el-button--primary.el-transfer__button{
        border-color: @btnbgc!important;
        background-color: @btnbgc!important;
        &:hover{
            opacity: 0.8;
        }
    }
    .el-button.el-button--primary.is-disabled.el-transfer__button{
        border-color: @btnbgc!important;
        background-color: @btnbgc!important;
        opacity: 0.6;
    }
    //logo 背景色
    // .logoBox .logoTile {
    //     background: #506D80!important;
    // }
    //折叠处背景色
    .el-aside .isOpenArrBox .OpenArr {
        background: #1E4260!important;
    }
    // 标题box颜色
    .titleBoxColor {
        background: @backgroundTitle!important;
    }
    
    .externalLink:hover{
        color: @hoverbg !important;
    }
    // 二级小标题前面竖线
    .secondaryTitleTheme::before{
        background: @btnbgc!important;
    }
    // 字体色
    .fontColorTheme {
        color: @btnbgc!important;
    }
    // 步骤字体色
    .versionUpdateDetail{
        .stepFontColorTheme {
            color: @btnbgc!important;
            .iconshujutongbu{
                color: @btnbgc!important;
            }
        }
        .stepFontColorTheme {
            &::before {
                background: @btnbgc!important;
            }
        }
    }
    // 边框色
    .fontBorderTheme {
        border-color: @btnbgc!important;
    }
    // 背景色
    .bgcTheme {
        background-color: @btnbgc!important;
    }
    // svg填充色
    .svgFillTheme {
        fill: @btnbgc!important;
    }
    .dotTheme::before {
        background-color: @btnbgc!important;
    }
    .actionBoxAdd {
        border-color:@btnbgc !important;
        color:@btnbgc !important;
        &:hover {
            background:#E5F4F3;
        }
    }
    .tabBox{
        .el-tabs__item.is-active,.el-tabs__item:hover{
            color: @hoverbg !important;
        }
        .el-tabs__active-bar {
            background-color: @hoverbg !important;
        }
    }
    // 开关样式
    .el-switch.is-checked .el-switch__core{
        border-color:@btnbgc !important;
        background-color:@btnbgc !important; 
     }
    //  自写进度条样式
    .blueCircle {
        background: #009588 !important;
    }
    .iconIcon1Finished {
        color: #009588 !important;
    }

    //二级标题小绿条
    // .secondLevelTitleStyle{
    //     border-left: 4px solid @btnbgc !important;
    .dateTheme{
        .el-input__inner {
            color:@btnbgc!important;
        }
        .el-input__prefix {
            color:@btnbgc!important;
        }
    }
    .el-divider__text{
        color: @btnbgc!important;
    }
    /deep/.el-steps{
        .el-step__head.is-process .el-step__icon.is-text {
            border: 2px solid @hoverbg;
            background: @hoverbg;
        }
        .el-step__head.is-success .el-step__icon.is-text {
            border-color: @hoverbg;
        }
        .el-step__title.is-success {
            color: @hoverbg;
        }
    }

    //考勤按年按月按日查询样式
    .tabsContainer .el-radio-button__orig-radio:checked+.el-radio-button__inner{
        border-color: @btnbgc!important;
        color:@btnbgc!important;
        -webkit-box-shadow: -1px 0 0 0 @btnbgc !important;
        box-shadow: -1px 0 0 0 @btnbgc !important;
    }
    
    .tabsContainer .el-radio-button:first-child .el-radio-button__inner{
        box-shadow:none!important;
    }
    .logo-img {
        filter: drop-shadow(@btnbgc 80px 0) !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: @btnbgc;
        border-color: @btnbgc;
    }

    .el-checkbox__inner:hover {
        border-color: @btnbgc!important;
    }
    .setTabs {//信用评价指标设置主题色
        .active {
            background: rgba(0, 149, 136, 0.1);
            color: @btnbgc!important;
        }
        .hasUsed {
            color: @btnbgc!important;
        }
        .el-checkbox__inner:hover {
            border-color: @btnbgc!important;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: @btnbgc!important;
            border-color: @btnbgc!important;
        }
    }
    .standardSetContent {//信用评价指标设置主题色
        .el-radio__inner:hover {
            border-color: @btnbgc!important;
        }
        .el-radio__input.is-checked .el-radio__inner {
            border-color: @btnbgc!important;
        }
        .el-radio__input.is-checked .el-radio__inner::after {
            background: @btnbgc!important;
        }
        .el-radio__input.is-checked + .el-radio__label {
            color: @btnbgc!important;
        }
    }
    .addLevel:hover {//信用评价指标设置主题色
        color: @btnbgc!important;
        border-color: @btnbgc!important;
    }
    .el-step.is-vertical .el-step__head{
        margin-top: 2px!important;
    }

    .el-radio__input.is-checked .el-radio__inner {
        background-color: @btnbgc!important;
        border-color: @btnbgc!important;
    }
    .el-radio__inner:hover {
        border-color: @btnbgc!important;
    }
}